<template>
    <div id="my-wallet">
        <!-- 我的钱包 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                    <div class="left"
                        slot="left">
                        <van-icon name="arrow-left"
                                size="24px"
                                color="#fff" />
                    </div>
                    <div class="title"
                        slot="title">{{title}}</div>
                </van-nav-bar>
                <div class="widthdraw-case">
                    <div class="main-case bgwrite">
                        <div class="each-cash">
                            <div class="key-case">钱包余额</div>
                            <div class="value-case" style="border-right: 0.01rem dashed #959595;">￥ {{walletBalance}}</div>
                        </div>
                        <div class="each-cash">
                            <div class="key-case">可提现余额</div>
                            <div class="value-case">￥ {{walletWithdraw}}</div>
                        </div>
                        <div class="btn-case" v-if="walletWithdraw>0" @click="goWithdraw">
                            <div>提现</div>
                        </div>
                        <div class="btn1-case" v-else>
                            <div>提现</div>
                        </div> 
                    </div>
                    <div class="title-case bgwrite">账单明细</div>
                </div>
            </div>
            <div class="reset-wrapper bgwrite">
                <div class="reset-content" v-if="myWalletDetails">
                    <div class="each-case" v-for="(itemL,indexL) in myWalletDetails" :key="indexL">
                        <div class="top-case">
                            <div class="title-case">{{itemL.title}} {{itemL.remark?'-' + ' ' +itemL.remark: ''}}</div>
                            <div class="num-case" v-if="itemL.operators=='+'">￥{{itemL.money}}</div>
                            <div class="num-casemin" v-if="itemL.operators=='-'">￥-{{itemL.money}}</div>
                        </div>
                        <div class="bottom-case">
                            <div class="date-case">{{itemL.businessTime}}</div>
                            <div class="balance-case" v-if="itemL.remainingSum">￥{{itemL.remainingSum}}</div>
                        </div>
                    </div>
                </div>
                <div class="no-data" v-else>暂无数据</div>
            </div>
      </div>
    </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
import { mapMutations } from "vuex";
export default {
  components: {
  },
  data() {
    return {
      title: '我的钱包',
      walletBalance: 0,
      walletWithdraw: 0,
      myWalletDetails: []
    }
  },
  created() {
      this.myWallet()
  },
  methods: {
      diffBack(){
          this.$router.push('/performance/personalCenter')
      },
    // 跳转提现页面
      goWithdraw() {
          this.$router.push('/performance/withdrawMoney')
      },
      
    // 我的钱包
    async myWallet() {
      const SPC = await HTTP("myWallet", {
        userUid: getuserUid()
      });
      console.log(SPC.data)
      if (SPC.code == 200) {
          this.walletWithdraw = SPC.data.walletWithdraw?SPC.data.walletWithdraw:0
          this.walletBalance = SPC.data.walletBalance?SPC.data.walletBalance:0
          this.setWalletWithdraw(this.walletWithdraw)
          this.myWalletDetails  = SPC.data.myWalletDetails
      } else {
        this.$toast(SPC.msg|| '服务器异常')
      }
    },
       ...mapMutations([ "setWalletWithdraw"])
  }
};
</script>
<style lang="scss" scoped>
#my-wallet {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
            }
            .widthdraw-case{
                padding: 1.16rem 0.24rem 0;
                height: 4.54rem;
                box-sizing: border-box;
                .main-case{
                    box-sizing: border-box;
                    width: 100%;
                    padding: 0.3rem 0;
                    height: 2.48rem;
                    border-radius: 0.1rem;
                    margin-bottom: 0.2rem;
                    .each-cash{
                        width: 50%;
                        text-align: center;
                        display: inline-block;
                        vertical-align: top;
                        box-sizing: border-box;
                        .key-case{
                            color: #656565FF;
                            font-size: 0.3rem;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            line-height: 0.3rem;
                            margin-bottom: 0.2rem;
                        }
                        .value-case{
                            color: #5E8EFEFF;
                            font-size: 0.5rem;
                            font-family: PingFangSC-Semibold;
                            font-weight: 600;
                            line-height: 0.56rem;
                            margin-bottom: 0.35rem;
                        }
                    }
                    .btn-case{
                        width: 100%;
                        text-align: center;
                        div{
                            margin: 0 auto;
                            background: #5E8EFEFF;
                            border-radius: 0.1rem;
                            height: 0.6rem;
                            width: 1.56rem;
                            line-height: 0.6rem;
                            color: #fff;
                            font-size: 0.24rem;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            line-height: 0.6rem;
                        }
                    }
                    .btn1-case{
                        width: 100%;
                        text-align: center;
                        div{
                            background: #DFE8FF;
                            border-radius: 0.1rem;
                            height: 0.6rem;
                            width: 1.56rem;
                            line-height: 0.6rem;
                            color: #fff;
                            font-size: 0.24rem;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            line-height: 0.6rem;
                            margin: 0 auto;
                        }
                    }
                }
                .title-case{
                    width: 100%;
                    text-indent: 0.24rem;
                    height: 0.64rem;
                    line-height: 0.64rem;
                    color: #959595FF;
                    font-size: 0.24rem;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    border-bottom: 0.01rem solid #E5E5E5;
                    border-radius: 0.1rem 0.1rem 0 0;
                }
            }
        }
        .reset-wrapper{
            position: fixed;
            top: 4.50rem;
            left: 0.24rem;
            right: 0.24rem;
            overflow-y: scroll;
            bottom: 0.24rem;
            border-radius: 0 0 0.1rem 0.1rem;
            .reset-content{
                box-sizing: border-box;
                padding: 0 0.24rem 0.24rem;
                .each-case{
                    padding: 0.24rem 0;
                    border-bottom: 0.01rem solid #E5E5E5;
                    .top-case{
                        margin-bottom: 0.2rem;
                        div{
                            display: inline-block;
                        }
                       .title-case{
                           width: 60%;
                           color: #282828;
                           line-height: 0.36rem;
                           font-size: 0.28rem;
                           font-family: PingFangSC-Regular;
                           font-weight: 400;
                           text-align: left;
                       }
                       .num-case{
                           width: 40%;
                           color: #5E8EFE;
                           line-height: 0.36rem;
                           font-size: 0.28rem;
                           font-family: PingFangSC-Regular;
                           font-weight: 400;
                           text-align: right;
                       }
                       .num-casemin{
                           width: 40%;
                           color: #FF5959;
                           line-height: 0.36rem;
                           font-size: 0.28rem;
                           font-family: PingFangSC-Regular;
                           font-weight: 400;
                           text-align: right;
                       }
                    }
                    .bottom-case{
                        div{
                            display: inline-block;
                            width: 50%;
                            color: #959595;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            font-size: 0.24rem;
                            text-align: left;
                        }
                        .balance-case{
                            text-align: right;
                        }
                    }
                }
            }
            .no-data{
                width: 100%;
                height: 100%;
                text-align: center;
                color: #959595FF;
                font-size: 0.24rem;
                margin-top:50%;
            }
        }
    }
}
</style>
